<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>		
		<!-- 引入本地资源 -->
		<!-- 引入vue.js -->
		<script src="js/vue.js"></script>
		<!-- 引入elementui的js资源 -->
		<script src="js/element/index.js"></script>
		<!-- 引入elementui的css样式 -->
		<link rel="stylesheet" href="css/index.css" />
		<!-- 引入网络请求库axios -->
		<script src="js/axios.min.js"></script>
		<!-- 引入qs，处理参数问题，将参数序列化 -->
		<script src="js/qs.min.js"></script>
		<!-- 引入cdn上的资源，但是与网速有关系 -->
		<!-- 引入样式 -->
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
		<!-- 引入组件库 -->
		<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
		<style>
		#app{
			margin-top: 240px;
			color: green;
		}
		
		
		</style>
	</head>
	<body style="background-color: #00FFFF;">
		<div id="app">
			<el-form :model="userinfo" :rules="rules" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item  prop="username">
							<el-input prefix-icon="el-icon-user-solid" type="text" v-model="userinfo.username" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item  prop="userpwd">
							<el-input prefix-icon="el-icon-s-goods" type="password" v-model="userinfo.userpwd" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="10">
						<el-form-item>
							<el-button type="primary" @click="login">提交</el-button>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				userinfo: {
					username: "",
					userpwd: ""

				},
				 rules: {
				          username: [
				            { required: true, message: '请输入用户名', trigger: 'blur' },
				            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				          ],
						  userpwd: [
						    { required: true, message: '请输入密码', trigger: 'blur' }
						    
						  ]
					}
			},
			methods: {
				login: function() {
					// 对请求参数进行转义
					// Qs.stringify是对  对象  类型的参数进行序列化处理
					// 序列化成URL的形式，以&进行拼接
					var params=Qs.stringify(this.userinfo);
					axios.post("http://localhost:8086/login",params)
					.then(function(response){
						// 根据响应回来的结果进行判断，若返回ok，则进行页面跳转，
						// 若返回eg则返回登录页面
						if(response.data=="ok"){
							console.log(1111)
							window.location.href="welcome.html"
						}else{
							window.location.href="index.html"
						}
					})

				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>
